<template>
        <!-- 订单列表 -->
        <div id="orderListItem" @click="handlerClick">
            <div class="orderListItem-state">
                <p>2021-04-09 10:06:50</p>
                <p class="orderListItem-state-succeed">{{state}}</p>
            </div>
            <van-card
            num="1"
            :title="title"
            :thumb="img"
            />
            <!-- 总计 -->
            <div class="orderListItem-total">
            共<span>1</span>件 总计<span>{{price}}</span>
            </div>
            <!-- 按钮 -->
            <div class="orderListItem-btn" v-if="'true' == boole">
                <van-button plain type="primary" size="small" color="#a3a3a3">{{btn1}}</van-button>
                <van-button plain type="primary" size="small" color="#ff4b3e" class="take">{{btn2}}</van-button>
            </div>
        </div>
</template>

<script>
export default {
    props:["state","price","title","img","boole","btn1","btn2",],
    methods: {
        handlerClick() {
            console.log(1111);
            this.$router.push('/orderDetails').catch(err => {});
        }
    }
};
</script>

<style lang="less" scoped>
#orderListItem{
    background-color: #ffffff;
    width: 700px;
    margin: 0 auto;
    border-radius: 10px;
    margin-top: 40px;
    .orderListItem-state{
        display: flex;
        justify-content: space-between;
        padding: 20px;
        font-size: 24px;
        .orderListItem-state-succeed{
            color: red;
            font-weight: bold;
        }
    }
    .van-card{
        margin-top: 0px;
        background-color: #fff;
        height: 183px;
        width: 100%;
        .van-card__header{
            margin-top: 9px;
            margin-left: -7px;
            height: 158px;
            position: relative;
        }
        .van-card__content{
            min-height: 0;
        }
        .van-card__thumb{
            width: 158px;
            height: 158px;
            border: dotted 2px #000000;
        }
        .van-card__title{
            width: 486px;
            font-size: 28px;
        }
        .van-card__desc{
            font-size: 24px;
            color: #9b9b9b;
        }
        .van-card__price{
            position: absolute;
            top: 41px;
            right: 0px;
            span{
                font-size: 28px;
            }
        }
        .van-card__num{
            margin-top: -50px;
            font-size: 28px;
            color: #000000;
        }
    }

    .orderListItem-btn{
        width: 100%;
        height: 100px;
        text-align: right;
        border-top: 1px #eeeeee solid;
        .take {
            margin-right: 19px;
        }
    }
}

.orderListItem-total{
    background-color: #fff;
    text-align: right;
    padding-right: 35px;
    font-size: 30px;
    padding-top: 35px;
    padding-bottom: 20px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
</style>
